@use './components/index.scss';

/* JSON 转换器主页面主题样式 */

.json-converter-container {
    background-color: var(--theme-json-converter-bg) !important;
    border: 1px solid var(--theme-json-converter-border) !important;
    transition: all 0.3s ease !important;
}

.json-converter-fullscreen {
    background-color: var(--theme-json-converter-bg) !important;
}

/* 面板主题样式 */
.json-converter-panel {
    border-right: 1px solid var(--theme-json-converter-border) !important;
}

.json-converter-panel-header {
    background-color: var(--theme-json-converter-header-bg) !important;
    border-bottom: 1px solid var(--theme-json-converter-border) !important;
}

.json-converter-panel-header-title {
    color: var(--theme-json-converter-header-text) !important;
}

.json-converter-panel-header-subtitle {
    color: var(--theme-json-converter-header-subtitle) !important;
}

.json-converter-panel-body {
    background-color: var(--theme-json-converter-input-bg) !important;
}

/* 输入框主题样式 */
.json-converter-input {
    color: var(--theme-json-converter-input-text) !important;

    &::placeholder {
        color: var(--theme-json-converter-input-placeholder) !important;
    }
}

/* 分隔条主题样式 */
.json-converter-resizer-line {
    background-color: var(--theme-json-converter-resizer-bg) !important;
    transition: background-color 0.2s ease !important;
}

.json-converter-resizer:hover .json-converter-resizer-line {
    background-color: var(--theme-json-converter-resizer-hover) !important;
}

/* 查看器主题样式 */
.json-converter-viewer {
    background-color: var(--theme-json-converter-viewer-bg) !important;
}

/* 操作按钮主题样式 */
.json-converter-actions-item {
    transition: opacity 0.2s ease !important;

    &:hover {
        opacity: 0.7 !important;
    }
}
